<template>
  <div>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/platform/myCenter' }">个人中心</el-breadcrumb-item>
      <el-breadcrumb-item>实训任务</el-breadcrumb-item>
      <el-breadcrumb-item>耗材管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="margin-top: 12px;border: 1px solid #eeeeee;border-top: 3px solid #499aff">
      <el-button type="primary" style="margin: 10px;" @click="initData">刷新</el-button>
      <el-table
        ref="multipleTable"
        :data="ConsumData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="name"
          label="材料名称"
          width="220">
        </el-table-column>
        <el-table-column
          prop="station"
          label="工位"
          width="220">
        </el-table-column>
        <el-table-column
          prop="original_stock"
          label="分配"
          width="120">
        </el-table-column>
        <el-table-column
          prop="usage"
          label="已用"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button
              type="success"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">修改用量</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>

<script>
  import {getStationConsumable, postStationConsumableUsage} from '@/api/api'
  export default {
    data () {
      return {
        ConsumData: []
      }
    },
    created () {
      this.initData()
    },
    methods: {
      initData () {
        getStationConsumable().then(res => {
          let data = JSON.parse(res.data)
          this.ConsumData = data
        }, res => {
          console.log(res)
        })
      },
      handleEdit (index, row) {
        this.$prompt('用量大小：', '修改用量', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /\d+/,
          inputErrorMessage: '请输入数字'
        }).then(({ value }) => {
          let data = {cid: row.id, usage: value}
          postStationConsumableUsage(data).then(res => {
            this.initData()
            this.$message({
              type: 'success',
              message: res.data
            })
          }, res => {
            this.$message({
              type: 'error',
              message: res.response.data
            })
          })
        }).catch(() => {
        })
      }
    }
  }
</script>

<style scoped lang="less">
  div{
    .el-breadcrumb {
      margin-top: 10px;
    }
  }
</style>
